<template>
  <div class="animation01">
    <h2>单元素/单组件的过渡</h2>
    <button v-on:click="show = !show">Toggle</button>
    <transition name="fade">
        <!-- <p v-if="show" id="hello">hello</p> -->
        <Chile1 v-if="show"></Chile1>
    </transition>
  </div> 
</template>

<script>
/* 
    vue的动画需要被包裹在transition组件里，我们需要给该组件设置name属性并设置值
    vue的过渡/离开动画一共有6个class
    1.v-enter：设置进入动画的初始值
    2.v-enter-to：设置进入动画的结束值
    3.v-enter-active：设置进入动画的动画执行样式和动画事件
    4.v-leave：设置离开动画的初始值
    5.v-leave-to：设置离开动画的结束值
    6.v-leave-active：设置离开动画的动画执行样式和动画事件
*/
import Chile1 from "../components/Child1"
export default {
    name: "Animation01",
    data() {
        return {
            show: true,
        };
    },
    components:{
        Chile1
    },
};
</script>

<style scoped>
.animation01 {
    width: 100%;
    height: 70%;
    background-color: blueviolet;
}
#hello{
    width: 300px;
    height: 200px;
    background-color: brown;
}
.fade-enter-active,.fade-leave-active{
	transition: all 3s;
}
.fade-enter{
	/* 进入动画 开始的位置，然后向enter-to设置的位置过渡 */
	transform: translate(0px,200px);opacity: 0;
}
.fade-enter-to{ 
	/* 进入动画 结束的时候要显示的位置，也就是组件不加动画之前的原始位置 */
	transform: translate(0px,0px);opacity: 1;
}
.fade-leave{
	/* 离开动画 开始的时候他的位置 */
	transform: translate(0px,0px);opacity: 1;
}
.fade-leave-to{
	/* 离开动画 最后消失的位置 */
	transform: translate(0px,200px);opacity: 0;
}
/* .fade-enter-active,.fade-leave-active {
    transition: all 0.5s;
}
.fade-leave,.fade-enter-to{
    transform: rotateZ(0);
}
.fade-enter, .fade-leave-to .fade-leave-active below version 2.1.8{ 
    opacity: 0;
    transform: rotateZ(18000000000deg);
} */
</style>